<template>
	<view
		:style="{ width: !themeStore.isCollapse ? '240px' : '64px' }"
		class="dx-left-window"
		:class="{ 'fixed-logo': themeStore.isFixedLogo, 'is-collapse': themeStore.isCollapse }"
	>
		<view v-if="props.matchLeftWindow">
			<el-scrollbar>
				<template v-if="!themeStore.isFixedLogo">
					<view class="navbar-left pointer" :style="{ width: !themeStore.isCollapse ? '240px' : '64px' }">
						<view class="logo flex pl-10px">
							<image :src="appStore.app.site_logo" mode="heightFix"></image>
							<view class="pl-10px online" v-if="!themeStore.isCollapse">
								<view class="name" v-if="!themeStore.isCollapse"> {{ appStore.app.site_name || themeStore.websiteTitle }} </view>
								<view class="flex items-center">
									<view class="dot"></view>
									<view class="ml-5px">在线</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<vertical
					:menuList="routeStore.menuList"
					:isCollapse="themeStore.isCollapse"
					:isUniqueOpened="themeStore.isUniqueOpened"
					:isCollapseTransition="themeStore.isCollapseTransition"
					:isOpenSelectBgColor="themeStore.isOpenSelectBgColor"
				/>
			</el-scrollbar>
		</view>
		<view v-else>
			<el-drawer
				v-model="themeStore.showLeftMenu"
				:with-header="false"
				class="left-window-drawer"
				:append-to-body="true"
				direction="ltr"
				@close="close"
				size="240px"
			>
				<el-scrollbar>
					<view class="navbar-left pointer">
						<view class="logo flex pl-10px">
							<image :src="appStore.app.site_logo" mode="heightFix"></image>
							<view class="pl-10px online">
								<view class="name"> {{ appStore.app.site_name || themeStore.websiteTitle }} </view>
								<view class="flex items-center">
									<view class="dot"></view>
									<view class="ml-5px">在线</view>
								</view>
							</view>
						</view>
					</view>
					<vertical
						:isOpenSelectBgColor="themeStore.isOpenSelectBgColor"
						:menuList="routeStore.menuList"
						:isCollapse="themeStore.isCollapse"
						:isUniqueOpened="themeStore.isUniqueOpened"
						:isCollapseTransition="themeStore.isCollapseTransition"
				/></el-scrollbar>
			</el-drawer>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import vertical from './components/vertical.vue';
import { useThemeStore } from '@/uni_modules/dx-admin/stores/theme';
import { useRouteStore } from '@/uni_modules/dx-admin/stores/routes';
import { useAppStore } from '@/uni_modules/dx-admin/stores/app';
import { useRoute } from 'vue-router';

console.log('left window');
const themeStore = useThemeStore(),
	routeStore = useRouteStore(),
	appStore = useAppStore();

const props = defineProps<{
	matchLeftWindow: boolean;
}>();
// 路由更新时
const route = useRoute();

watch(route, (newRoute) => {
	let path = newRoute.path;
	// 展示默认的路由
	if (!path || path === '/') {
		path = routeStore.homePage;
	}
	// 设置tags 路由,应用初始化，在获取菜单处设置，菜单异步，此时未获取到菜单
	if (!!routeStore.currentActiveRoute) {
		routeStore.setTagRouteList(path);
	}
	// 当前默认的路由
	routeStore.setActiveRoute(path);
	// 设置breadcrumb数据
	routeStore.setBreadcrumbList(path);
});

const close = () => {
	console.log(props.matchLeftWindow);
};
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar {
	position: fixed;
	width: 240px;
	top: 0;
	z-index: 208;
	background-color: var(--dx-menu-bg-color);
	transition: all 0.35s ease-in-out;
}
.fixed-logo {
	&::v-deep .el-scrollbar {
		z-index: 996;
		padding-top: 85px;
	}
}
.is-collapse {
	&::v-deep .el-scrollbar {
		width: 64px;
	}
}
.navbar-left {
	background-color: var(--dx-menu-bg-color);
	color: #ffffff;
	transition: all 0.2s;
	padding: 10px 0;
	.online {
		width: 170px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 12px;
		.name {
			font-size: 15px;
			margin-bottom: 3px;
		}
		.dot {
			width: 8px;
			height: 8px;
			background-color: var(--el-color-primary);
			border-radius: 50%;
		}
	}
	.logo {
		display: flex;
		align-items: center;
		image {
			height: 38px;
			width: 38px;
		}
	}
}
</style>
